<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=375, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>SnapCAD - Professional CAD Viewer</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    body { 
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    .phone-container { 
      width: 375px; 
      height: 812px; 
      margin: 20px auto; 
      border-radius: 40px; 
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
      overflow: hidden; 
      border: 8px solid #1a1a1a;
      position: relative;
    }
    .phone-container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 150px;
      height: 30px;
      background: #1a1a1a;
      border-radius: 0 0 20px 20px;
      z-index: 10;
    }
    .screen { 
      width: 100%; 
      height: 100%; 
      background: white; 
      overflow: hidden;
      padding-top: 44px;
    }
    .page { display: none; }
    .page.active { display: flex; }
    .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
    .card-hover { transition: all 0.3s ease; }
    .card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); }
    .feature-card { 
      background: white; 
      border-radius: 16px; 
      padding: 20px; 
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
      border: 1px solid rgba(255,255,255,0.2);
    }
    .tab-active { color: #667eea; }
    .tab-inactive { color: #9ca3af; }
    .status-bar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 44px;
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(20px);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      font-size: 14px;
      font-weight: 600;
      z-index: 20;
    }
  </style>
</head>
<body>
  <div class="phone-container">
    <div class="screen">
      <!-- Status Bar -->
      <div class="status-bar">
        <span>9:41</span>
        <div class="flex items-center space-x-1">
          <i class="fas fa-signal text-xs"></i>
          <i class="fas fa-wifi text-xs"></i>
          <i class="fas fa-battery-three-quarters text-xs"></i>
        </div>
      </div>

      <!-- Splash Screen -->
      <div id="splash" class="page active flex-col items-center justify-center gradient-bg text-white">
        <div class="mb-8 relative">
          <div class="w-32 h-32 bg-white rounded-full flex items-center justify-center shadow-2xl">
            <i class="fas fa-cube text-6xl text-indigo-600"></i>
          </div>
          <div class="absolute -bottom-2 -right-2 w-8 h-8 bg-yellow-400 rounded-full flex items-center justify-center">
            <i class="fas fa-bolt text-white text-sm"></i>
          </div>
        </div>
        <h1 class="text-4xl font-bold mb-3 tracking-tight">SnapCAD</h1>
        <p class="text-xl opacity-90 mb-12 text-center px-8">Professional CAD Viewer & Engineering Tools</p>
        <div class="w-16 h-1 bg-white rounded-full opacity-50 mb-8"></div>
        <button onclick="showPage('home')" class="bg-white text-indigo-600 px-8 py-4 rounded-full font-semibold text-lg shadow-lg hover:shadow-xl transition-all">
          Get Started
        </button>
      </div>

      <!-- Home Page -->
      <div id="home" class="page flex-col h-full bg-gray-50">
        <!-- Header -->
        <div class="bg-white px-6 py-4 shadow-sm">
          <div class="flex items-center justify-between">
            <div>
              <h1 class="text-2xl font-bold text-gray-900">SnapCAD</h1>
              <p class="text-sm text-gray-500">Professional Tools</p>
            </div>
            <button onclick="showPage('settings')" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
              <i class="fas fa-cog text-gray-600"></i>
            </button>
          </div>
        </div>

        <!-- Main Content -->
        <div class="flex-1 px-6 py-6 overflow-y-auto">
          <!-- CAD Viewer Card -->
          <div class="feature-card card-hover mb-6">
            <div class="flex items-center mb-4">
              <div class="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center mr-4">
                <i class="fas fa-cube text-indigo-600 text-xl"></i>
              </div>
              <div>
                <h3 class="text-lg font-semibold text-gray-900">CAD Viewer</h3>
                <p class="text-sm text-gray-500">View & analyze CAD files</p>
              </div>
            </div>
            <img src="https://images.unsplash.com/photo-1581094794329-c8112a89af12?auto=format&fit=crop&w=400&q=80" 
                 alt="CAD Drawing" class="w-full h-40 object-cover rounded-lg mb-4">
            <div class="flex space-x-3">
              <button onclick="showPage('cad-viewer')" class="flex-1 bg-indigo-600 text-white py-3 rounded-lg font-medium">
                <i class="fas fa-upload mr-2"></i>Open File
              </button>
              <button onclick="showPage('files')" class="px-4 py-3 border border-gray-300 rounded-lg" title="Recent Files">
                <i class="fas fa-history text-gray-600"></i>
              </button>
            </div>
          </div>

          <!-- Tools Grid -->
          <div class="grid grid-cols-2 gap-4 mb-6">
            <!-- Unit Converter -->
            <div onclick="showPage('converter')" class="feature-card card-hover cursor-pointer">
              <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mb-3">
                <i class="fas fa-exchange-alt text-green-600 text-xl"></i>
              </div>
              <h4 class="font-semibold text-gray-900 mb-1">Unit Converter</h4>
              <p class="text-xs text-gray-500">Convert measurements</p>
            </div>

            <!-- Measurement Tool -->
            <div onclick="showPage('measurement')" class="feature-card card-hover cursor-pointer">
              <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-3">
                <i class="fas fa-ruler-combined text-blue-600 text-xl"></i>
              </div>
              <h4 class="font-semibold text-gray-900 mb-1">Measurement</h4>
              <p class="text-xs text-gray-500">Precise calculations</p>
            </div>
          </div>

          <!-- Recent Files -->
          <div class="feature-card">
            <div class="flex items-center justify-between mb-4">
              <h4 class="font-semibold text-gray-900">Recent Files</h4>
              <button onclick="showPage('files')" class="text-indigo-600 text-sm">View All</button>
            </div>
            <div class="space-y-3">
              <div class="flex items-center space-x-3">
                <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
                  <i class="fas fa-file-alt text-red-600"></i>
                </div>
                <div class="flex-1">
                  <p class="font-medium text-gray-900 text-sm">floor_plan.dwg</p>
                  <p class="text-xs text-gray-500">2 hours ago</p>
                </div>
                <button class="text-indigo-600 text-sm">Open</button>
              </div>
              <div class="flex items-center space-x-3">
                <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
                  <i class="fas fa-file-alt text-yellow-600"></i>
                </div>
                <div class="flex-1">
                  <p class="font-medium text-gray-900 text-sm">blueprint.dxf</p>
                  <p class="text-xs text-gray-500">Yesterday</p>
                </div>
                <button class="text-indigo-600 text-sm">Open</button>
              </div>
            </div>
          </div>
        </div>

        <!-- Bottom Navigation -->
        <div class="bg-white border-t border-gray-200 px-6 py-2">
          <div class="flex justify-around">
            <button onclick="showPage('home')" class="flex flex-col items-center py-2 tab-active">
              <i class="fas fa-home text-lg mb-1"></i>
              <span class="text-xs">Home</span>
            </button>
            <button onclick="showPage('files')" class="flex flex-col items-center py-2 tab-inactive">
              <i class="fas fa-folder text-lg mb-1"></i>
              <span class="text-xs">Files</span>
            </button>
            <button onclick="showPage('converter')" class="flex flex-col items-center py-2 tab-inactive">
              <i class="fas fa-calculator text-lg mb-1"></i>
              <span class="text-xs">Tools</span>
            </button>
            <button onclick="showPage('settings')" class="flex flex-col items-center py-2 tab-inactive">
              <i class="fas fa-cog text-lg mb-1"></i>
              <span class="text-xs">Settings</span>
            </button>
          </div>
        </div>
      </div>

      <!-- CAD Viewer Page -->
      <div id="cad-viewer" class="page flex-col h-full bg-black">
        <!-- Header -->
        <div class="bg-black bg-opacity-90 px-4 py-3 flex items-center justify-between">
          <button onclick="showPage('home')" class="text-white">
            <i class="fas fa-arrow-left text-lg"></i>
          </button>
          <span class="text-white font-medium">CAD Viewer</span>
          <div class="flex space-x-3">
            <button class="text-white"><i class="fas fa-search"></i></button>
            <button class="text-white"><i class="fas fa-layer-group"></i></button>
            <button class="text-white"><i class="fas fa-expand"></i></button>
          </div>
        </div>

        <!-- Viewer Area -->
        <div class="flex-1 relative">
          <img src="https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=400&q=80" 
               alt="CAD Drawing" class="w-full h-full object-contain">
          
          <!-- Floating Tools -->
          <div class="absolute right-4 top-1/2 transform -translate-y-1/2 space-y-3">
            <button class="w-12 h-12 bg-white bg-opacity-90 rounded-full flex items-center justify-center shadow-lg">
              <i class="fas fa-plus text-gray-700"></i>
            </button>
            <button class="w-12 h-12 bg-white bg-opacity-90 rounded-full flex items-center justify-center shadow-lg">
              <i class="fas fa-minus text-gray-700"></i>
            </button>
            <button class="w-12 h-12 bg-white bg-opacity-90 rounded-full flex items-center justify-center shadow-lg">
              <i class="fas fa-crosshairs text-gray-700"></i>
            </button>
          </div>

          <!-- Bottom Toolbar -->
          <div class="absolute bottom-4 left-4 right-4 bg-white bg-opacity-95 rounded-xl p-3">
            <div class="flex justify-around">
              <button class="flex flex-col items-center">
                <i class="fas fa-ruler text-indigo-600 mb-1"></i>
                <span class="text-xs">Measure</span>
              </button>
              <button class="flex flex-col items-center">
                <i class="fas fa-eye text-indigo-600 mb-1"></i>
                <span class="text-xs">Layers</span>
              </button>
              <button class="flex flex-col items-center">
                <i class="fas fa-palette text-indigo-600 mb-1"></i>
                <span class="text-xs">Colors</span>
              </button>
              <button class="flex flex-col items-center">
                <i class="fas fa-share text-indigo-600 mb-1"></i>
                <span class="text-xs">Share</span>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Unit Converter Page -->
      <div id="converter" class="page flex-col h-full bg-gray-50">
        <!-- Header -->
        <div class="bg-white px-6 py-4 shadow-sm">
          <div class="flex items-center">
            <button onclick="showPage('home')" class="mr-4">
              <i class="fas fa-arrow-left text-gray-600 text-lg"></i>
            </button>
            <h1 class="text-xl font-semibold text-gray-900">Unit Converter</h1>
          </div>
        </div>

        <!-- Content -->
        <div class="flex-1 px-6 py-6">
          <!-- Category Tabs -->
          <div class="flex space-x-2 mb-6">
            <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium">Length</button>
            <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm">Area</button>
            <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm">Volume</button>
            <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm">Angle</button>
          </div>

          <!-- Converter Interface -->
          <div class="space-y-6">
            <!-- From -->
            <div class="feature-card">
              <label class="block text-sm font-medium text-gray-700 mb-2">From</label>
              <div class="flex space-x-3">
                <input type="number" value="1" class="flex-1 px-4 py-3 border border-gray-300 rounded-lg text-lg">
                <select class="px-4 py-3 border border-gray-300 rounded-lg bg-white">
                  <option>Meters</option>
                  <option>Feet</option>
                  <option>Inches</option>
                  <option>Millimeters</option>
                </select>
              </div>
            </div>

            <!-- Swap Button -->
            <div class="flex justify-center">
              <button class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center">
                <i class="fas fa-exchange-alt text-indigo-600"></i>
              </button>
            </div>

            <!-- To -->
            <div class="feature-card">
              <label class="block text-sm font-medium text-gray-700 mb-2">To</label>
              <div class="flex space-x-3">
                <input type="number" value="3.28084" readonly class="flex-1 px-4 py-3 border border-gray-300 rounded-lg text-lg bg-gray-50">
                <select class="px-4 py-3 border border-gray-300 rounded-lg bg-white">
                  <option>Feet</option>
                  <option>Meters</option>
                  <option>Inches</option>
                  <option>Millimeters</option>
                </select>
              </div>
            </div>

            <!-- Quick Conversions -->
            <div class="feature-card">
              <h4 class="font-semibold text-gray-900 mb-3">Quick Conversions</h4>
              <div class="space-y-2">
                <div class="flex justify-between text-sm">
                  <span>1 meter</span>
                  <span class="text-gray-600">3.28084 feet</span>
                </div>
                <div class="flex justify-between text-sm">
                  <span>1 meter</span>
                  <span class="text-gray-600">39.3701 inches</span>
                </div>
                <div class="flex justify-between text-sm">
                  <span>1 meter</span>
                  <span class="text-gray-600">1000 millimeters</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Measurement Tool Page -->
      <div id="measurement" class="page flex-col h-full bg-gray-50">
        <!-- Header -->
        <div class="bg-white px-6 py-4 shadow-sm">
          <div class="flex items-center">
            <button onclick="showPage('home')" class="mr-4">
              <i class="fas fa-arrow-left text-gray-600 text-lg"></i>
            </button>
            <h1 class="text-xl font-semibold text-gray-900">Measurement Tool</h1>
          </div>
        </div>

        <!-- Content -->
        <div class="flex-1 px-6 py-6">
          <!-- Tool Selection -->
          <div class="grid grid-cols-2 gap-4 mb-6">
            <div class="feature-card card-hover cursor-pointer border-2 border-indigo-200">
              <div class="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center mb-3">
                <i class="fas fa-ruler text-indigo-600 text-xl"></i>
              </div>
              <h4 class="font-semibold text-gray-900 mb-1">Distance</h4>
              <p class="text-xs text-gray-500">Measure linear distance</p>
            </div>

            <div class="feature-card card-hover cursor-pointer">
              <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mb-3">
                <i class="fas fa-vector-square text-green-600 text-xl"></i>
              </div>
              <h4 class="font-semibold text-gray-900 mb-1">Area</h4>
              <p class="text-xs text-gray-500">Calculate surface area</p>
            </div>

            <div class="feature-card card-hover cursor-pointer">
              <div class="w-12 h-12 bg-yellow-100 rounded-xl flex items-center justify-center mb-3">
                <i class="fas fa-angle-right text-yellow-600 text-xl"></i>
              </div>
              <h4 class="font-semibold text-gray-900 mb-1">Angle</h4>
              <p class="text-xs text-gray-500">Measure angles</p>
            </div>

            <div class="feature-card card-hover cursor-pointer">
              <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mb-3">
                <i class="fas fa-circle text-purple-600 text-xl"></i>
              </div>
              <h4 class="font-semibold text-gray-900 mb-1">Radius</h4>
              <p class="text-xs text-gray-500">Circle measurements</p>
            </div>
          </div>

          <!-- Instructions -->
          <div class="feature-card mb-6">
            <h4 class="font-semibold text-gray-900 mb-3">How to Use</h4>
            <div class="space-y-2 text-sm text-gray-600">
              <div class="flex items-start space-x-3">
                <span class="w-6 h-6 bg-indigo-100 rounded-full flex items-center justify-center text-xs font-medium text-indigo-600">1</span>
                <span>Select a measurement tool above</span>
              </div>
              <div class="flex items-start space-x-3">
                <span class="w-6 h-6 bg-indigo-100 rounded-full flex items-center justify-center text-xs font-medium text-indigo-600">2</span>
                <span>Open your CAD file in the viewer</span>
              </div>
              <div class="flex items-start space-x-3">
                <span class="w-6 h-6 bg-indigo-100 rounded-full flex items-center justify-center text-xs font-medium text-indigo-600">3</span>
                <span>Tap points on the drawing to measure</span>
              </div>
            </div>
          </div>

          <!-- Recent Measurements -->
          <div class="feature-card">
            <h4 class="font-semibold text-gray-900 mb-3">Recent Measurements</h4>
            <div class="space-y-3">
              <div class="flex justify-between items-center">
                <div>
                  <p class="font-medium text-gray-900 text-sm">Distance</p>
                  <p class="text-xs text-gray-500">floor_plan.dwg</p>
                </div>
                <span class="text-indigo-600 font-medium">15.5 m</span>
              </div>
              <div class="flex justify-between items-center">
                <div>
                  <p class="font-medium text-gray-900 text-sm">Area</p>
                  <p class="text-xs text-gray-500">blueprint.dxf</p>
                </div>
                <span class="text-indigo-600 font-medium">42.3 m²</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Files Page -->
      <div id="files" class="page flex-col h-full bg-gray-50">
        <!-- Header -->
        <div class="bg-white px-6 py-4 shadow-sm">
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <button onclick="showPage('home')" class="mr-4">
                <i class="fas fa-arrow-left text-gray-600 text-lg"></i>
              </button>
              <h1 class="text-xl font-semibold text-gray-900">My Files</h1>
            </div>
            <button class="w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center">
              <i class="fas fa-plus text-white"></i>
            </button>
          </div>
        </div>

        <!-- Search -->
        <div class="px-6 py-4 bg-white border-b">
          <div class="relative">
            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            <input type="text" placeholder="Search files..." class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg">
          </div>
        </div>

        <!-- Content -->
        <div class="flex-1 px-6 py-6 overflow-y-auto">
          <!-- File List -->
          <div class="space-y-4">
            <div class="feature-card">
              <div class="flex items-center space-x-4">
                <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
                  <i class="fas fa-file-alt text-red-600 text-xl"></i>
                </div>
                <div class="flex-1">
                  <h4 class="font-semibold text-gray-900">floor_plan.dwg</h4>
                  <p class="text-sm text-gray-500">2.4 MB • 2 hours ago</p>
                </div>
                <button class="text-gray-400">
                  <i class="fas fa-ellipsis-v"></i>
                </button>
              </div>
            </div>

            <div class="feature-card">
              <div class="flex items-center space-x-4">
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                  <i class="fas fa-file-alt text-blue-600 text-xl"></i>
                </div>
                <div class="flex-1">
                  <h4 class="font-semibold text-gray-900">blueprint.dxf</h4>
                  <p class="text-sm text-gray-500">1.8 MB • Yesterday</p>
                </div>
                <button class="text-gray-400">
                  <i class="fas fa-ellipsis-v"></i>
                </button>
              </div>
            </div>

            <div class="feature-card">
              <div class="flex items-center space-x-4">
                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                  <i class="fas fa-file-alt text-green-600 text-xl"></i>
                </div>
                <div class="flex-1">
                  <h4 class="font-semibold text-gray-900">electrical_plan.dwg</h4>
                  <p class="text-sm text-gray-500">3.1 MB • 3 days ago</p>
                </div>
                <button class="text-gray-400">
                  <i class="fas fa-ellipsis-v"></i>
                </button>
              </div>
            </div>

            <div class="feature-card">
              <div class="flex items-center space-x-4">
                <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
                  <i class="fas fa-file-alt text-yellow-600 text-xl"></i>
                </div>
                <div class="flex-1">
                  <h4 class="font-semibold text-gray-900">site_layout.dxf</h4>
                  <p class="text-sm text-gray-500">4.2 MB • 1 week ago</p>
                </div>
                <button class="text-gray-400">
                  <i class="fas fa-ellipsis-v"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Settings Page -->
      <div id="settings" class="page flex-col h-full bg-gray-50">
        <!-- Header -->
        <div class="bg-white px-6 py-4 shadow-sm">
          <div class="flex items-center">
            <button onclick="showPage('home')" class="mr-4">
              <i class="fas fa-arrow-left text-gray-600 text-lg"></i>
            </button>
            <h1 class="text-xl font-semibold text-gray-900">Settings</h1>
          </div>
        </div>

        <!-- Content -->
        <div class="flex-1 px-6 py-6 overflow-y-auto">
          <!-- Profile Section -->
          <div class="feature-card mb-6">
            <div class="flex items-center space-x-4">
              <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center">
                <i class="fas fa-user text-indigo-600 text-2xl"></i>
              </div>
              <div>
                <h3 class="font-semibold text-gray-900">John Engineer</h3>
                <p class="text-sm text-gray-500">john.engineer@company.com</p>
              </div>
            </div>
          </div>

          <!-- Settings Groups -->
          <div class="space-y-6">
            <!-- General -->
            <div>
              <h4 class="font-semibold text-gray-900 mb-3">General</h4>
              <div class="feature-card space-y-4">
                <div class="flex items-center justify-between">
                  <div class="flex items-center space-x-3">
                    <i class="fas fa-globe text-gray-600"></i>
                    <span>Language</span>
                  </div>
                  <div class="flex items-center space-x-2">
                    <span class="text-gray-500">English</span>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                  </div>
                </div>
                <div class="flex items-center justify-between">
                  <div class="flex items-center space-x-3">
                    <i class="fas fa-palette text-gray-600"></i>
                    <span>Theme</span>
                  </div>
                  <div class="flex items-center space-x-2">
                    <span class="text-gray-500">Light</span>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                  </div>
                </div>
                <div class="flex items-center justify-between">
                  <div class="flex items-center space-x-3">
                    <i class="fas fa-ruler text-gray-600"></i>
                    <span>Default Units</span>
                  </div>
                  <div class="flex items-center space-x-2">
                    <span class="text-gray-500">Metric</span>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                  </div>
                </div>
              </div>
            </div>

            <!-- CAD Settings -->
            <div>
              <h4 class="font-semibold text-gray-900 mb-3">CAD Viewer</h4>
              <div class="feature-card space-y-4">
                <div class="flex items-center justify-between">
                  <div class="flex items-center space-x-3">
                    <i class="fas fa-eye text-gray-600"></i>
                    <span>Auto-fit on Open</span>
                  </div>
                  <div class="w-12 h-6 bg-indigo-600 rounded-full relative">
                    <div class="w-5 h-5 bg-white rounded-full absolute right-0.5 top-0.5"></div>
                  </div>
                </div>
                <div class="flex items-center justify-between">
                  <div class="flex items-center space-x-3">
                    <i class="fas fa-layer-group text-gray-600"></i>
                    <span>Show All Layers</span>
                  </div>
                  <div class="w-12 h-6 bg-gray-300 rounded-full relative">
                    <div class="w-5 h-5 bg-white rounded-full absolute left-0.5 top-0.5"></div>
                  </div>
                </div>
                <div class="flex items-center justify-between">
                  <div class="flex items-center space-x-3">
                    <i class="fas fa-mouse-pointer text-gray-600"></i>
                    <span>Snap to Grid</span>
                  </div>
                  <div class="w-12 h-6 bg-indigo-600 rounded-full relative">
                    <div class="w-5 h-5 bg-white rounded-full absolute right-0.5 top-0.5"></div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Storage -->
            <div>
              <h4 class="font-semibold text-gray-900 mb-3">Storage</h4>
              <div class="feature-card space-y-4">
                <div class="flex items-center justify-between">
                  <div class="flex items-center space-x-3">
                    <i class="fas fa-cloud text-gray-600"></i>
                    <span>Cloud Sync</span>
                  </div>
                  <div class="w-12 h-6 bg-indigo-600 rounded-full relative">
                    <div class="w-5 h-5 bg-white rounded-full absolute right-0.5 top-0.5"></div>
                  </div>
                </div>
                <div class="flex items-center justify-between">
                  <div class="flex items-center space-x-3">
                    <i class="fas fa-trash text-gray-600"></i>
                    <span>Clear Cache</span>
                  </div>
                  <div class="flex items-center space-x-2">
                    <span class="text-gray-500">2.1 GB</span>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                  </div>
                </div>
              </div>
            </div>

            <!-- About -->
            <div>
              <h4 class="font-semibold text-gray-900 mb-3">About</h4>
              <div class="feature-card space-y-4">
                <div class="flex items-center justify-between">
                  <div class="flex items-center space-x-3">
                    <i class="fas fa-info-circle text-gray-600"></i>
                    <span>Version</span>
                  </div>
                  <span class="text-gray-500">2.1.0</span>
                </div>
                <div class="flex items-center justify-between">
                  <div class="flex items-center space-x-3">
                    <i class="fas fa-star text-gray-600"></i>
                    <span>Rate App</span>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="flex items-center justify-between">
                  <div class="flex items-center space-x-3">
                    <i class="fas fa-shield-alt text-gray-600"></i>
                    <span>Privacy Policy</span>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    function showPage(pageId) {
      // Hide all pages
      const pages = document.querySelectorAll('.page');
      pages.forEach(page => {
        page.classList.remove('active');
      });
      
      // Show selected page
      document.getElementById(pageId).classList.add('active');
      
      // Update tab states
      updateTabStates(pageId);
    }

    function updateTabStates(activePageId) {
      const tabs = document.querySelectorAll('[onclick*="showPage"]');
      tabs.forEach(tab => {
        if (tab.getAttribute('onclick').includes(activePageId)) {
          tab.classList.remove('tab-inactive');
          tab.classList.add('tab-active');
        } else {
          tab.classList.remove('tab-active');
          tab.classList.add('tab-inactive');
        }
      });
    }

    // Auto-transition from splash to home
    setTimeout(() => {
      showPage('home');
    }, 3000);

    // Add touch feedback for buttons
    document.addEventListener('DOMContentLoaded', function() {
      const buttons = document.querySelectorAll('button, .cursor-pointer');
      buttons.forEach(button => {
        button.addEventListener('touchstart', function() {
          this.style.transform = 'scale(0.95)';
        });
        button.addEventListener('touchend', function() {
          this.style.transform = 'scale(1)';
        });
      });
    });
  </script>
</body>
</html>